<template>
  <div class="point-detail">
    <div class="good" v-if="isCouponProduct != 1">
      <img :src="ware.waresPic" alt="" srcset="" />
    </div>

    <div class="center" v-else>
      <template v-if="couponList.length != 0">
        <div class="title">此次兑换包含以下优惠劵</div>
        <div
          class="coupon"
          :class="[
            ele.couponType == 1 ? 'direct' : '',
            ele.couponType == 2 ? 'rate' : '',
            ele.couponType == 3 ? 'exchange' : '',
            ele.couponType == 4 ? 'carwash' : '',
            ele.couponType == 5 ? 'reduction' : '',
            ele.couDrawStatus == '1' ? 'expired' : ''
          ]"
          v-for="ele in couponList"
          :key="ele.couponTemplateId"
        >
          <div class="left">
            <div
              class="amount"
              v-if="['1','4','5'].includes(ele.couponType)"
            >
              ￥
              <span class="value">{{ ele.couponAmt }}</span>
            </div>
            <div class="amount" v-if="ele.couponType == 2">
              <span class="value">{{ ele.couponAmt }}</span>
              %
            </div>
            <div class="condition" v-if="ele.couponType  == 5">
            每升立减
          </div>
            <div class="condition">
              {{
                couponListInfo.couponThresholdAmt == 0
                  ? "无门槛"
                  : "满" + couponListInfo.couponThresholdAmt + "元可用"
              }}
            </div>
            <div class="exchangeName">{{ ele.couponName }}</div>
          </div>
          <div class="right">
            <div class="title">
              <span class="type">
                {{ getCouponText(ele.couponType) }}
              </span>
              <span class="state">
                {{ ele.couDrawStatus == 0 ? "可尝试领取" : "" }}
                {{ ele.couDrawStatus == 1 ? "已领取" : "" }}
                {{ ele.couDrawStatus == 2 ? "领取失败" : "" }}
                <!--
                  {{ ele.showStatus == 1 ? "优惠券已领完" : "" }}
                  {{ ele.showStatus == 2 ? "不满足领取条件" : "" }}
                  {{ ele.showStatus == 3 ? "不符合领取条件" : "" }}
                  -->
              </span>
            </div>
            <div class="content">
              <div class="items">
                <div class="item scope">
                  适用：
                  <span v-if="['1','2','4','5'].includes(ele.couponType)">
                    {{ ele.couponStaNames }}
                  </span>
                  <span v-if="ele.couponType == 3">{{ ele.verStaNames }}</span>

                  <!-- <span>
                    {{
                      ele.couponType == 1 || ele.couponType == 2
                        ? ele.couponStaNames
                        : ""
                    }}{{ ele.couponType == 3 ? ele.verStaNames : "" }}
                  </span> -->
                </div>
                <div class="item valid">
                  截止：<span>
                    {{
                      (ele.effectiveTimeType == 1
                        ? (ele.effectiveTimeEnd || "").replace(
                            /\s{1,}\S{8,8}/,
                            ""
                          )
                        : "") +
                        (ele.effectiveTimeType == 2
                          ? "领取后" + ele.effectiveDayNum + "天有效"
                          : "")
                    }}
                  </span>
                </div>
                <div class="item from">
                  来源：<span>{{ ele.couponRemark }}</span>
                </div>
              </div>
              <!-- <div class="btn">
                  <button @click="getCoupon([ele.couponTemplateId])">
                    领取
                  </button>
                </div> -->
            </div>
            <div class="tip">
              {{
                !!ele.couponDetails
                  ? ele.couponDetails
                  : "使用此劵更优惠~更多活动，请关注我们的公众号！"
              }}
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div style="text-align: center;padding:0.2rem">
          当前活动里没有可有优惠券~
        </div>
      </template>

      <!-- <template v-else>
        <div style="text-align: center">{{ tip }}</div>
      </template> -->
    </div>

    <div class="title">
      <div class="title_left">
        <div class="text">{{ ware.waresName }}</div>
        <p class="info_waresDetail"><span>介绍文案：</span>{{ ware.waresDetail }}</p>
        <div class="tittle_bottom">
          <div class="price">
            <span class="icon"></span>
            <span class="amount">{{ ware.saleIntegral }}</span>
          </div>
          <div class="sold">已兑换 {{ ware.waresOutCount }}</div>
         </div>
      </div>
    </div>
      <div class="sum">
      <span>
        合计：<b>{{ ware.saleIntegral * exchangeNum }} </b>积分
      </span>
      <van-stepper v-model="exchangeNum" @change="handleValueChange" integer />
    </div>
    

    <!-- <div class="selected">
      <div class="text">已选</div>
      <div class="content">儿童情商课+智慧课堂,1</div>
      <div class="icon"></div>
    </div> -->
    <!-- <div class="pictures">
      <div class="text">- 图文详情 -</div>
    </div> -->
    <div class="buy">
      <van-button
        @click="exchange"
        color="#fe9700"
        :disabled="isDisableExchange"
        >立刻兑换</van-button
      >
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { mapActions, mapState, mapGetters } from "vuex";
import { Stepper, Toast, Button } from "vant";
Vue.use(Stepper);
Vue.use(Toast);
Vue.use(Button);

export default {
  validate({ params }) {
    // 必须是number类型
    return /^\d{1,}$/.test(params.id);
  },
  head() {
    return {
      title: "积分商品详情页"
    };
  },
  data() {
    return {
      ware: {},
      id: this.$route.params.pid,
      couponList: [],
      couponListInfo: {},
      isCouponProduct: 0,
      exchangeNum: 0, // 积分
      isDisableExchange: false // 是否可以点击兑换
    };
  },
  mounted() {
    this.init();
  },
  computed: {
    ...mapState({
      pointInfo: state => state.point.pointInfo
    }),
    ...mapGetters({
      findWare: "point/findWare",
      userInfo: "authen/userInfo"
    })
  },
  methods: {
    ...mapActions({
      getPointInfo: "point/getPointInfo"
    }),

    init() {
      // const tmpWare = this.findWare(this.$route.params.pid);
      const tmpWare = undefined;

      if (!this.tmpWare) {
        this.getPointInfo();
        this.$axios
          .$get("/getIntegralWaresInfo", {
            params: {
              id: this.$route.params.pid
            }
          })
          .then(res => {
            if (res.retCode === 0) {
              if (res.data.isCouponProduct == 1) {
                if (res.data.couponIssue) {
                  this.couponList = res.data.couponIssue.couponTemplateList;
                }
                // this.couponList = res.data.couponIssue.couponTemplateList; // 原来的代码
                this.couponListInfo = res.data.couponIssue;
                this.isCouponProduct = res.data.isCouponProduct;
              }
              this.ware = res.data;
            } else {
              throw new Error("拉取商品失败");
            }
          })
          .catch(err => {
            alert(err);
          });
      } else {
        this.ware = tmpWare;
      }
    },
     // 匹配优惠券类型名称
     getCouponText(couponType) {
      const couponTypeMap = [
        { type: '1', text: '现金券' },
        { type: '2', text: '折扣券' },
        { type: '3', text: '兑换劵' },
        { type: '4', text: '洗车券' },
        { type: '5', text: '立减券' },
        { type: '100', text: '优惠券' }
      ];
      let couponText = '';
      const matchedCoupon = couponTypeMap.find(ele => ele.type == couponType);
        if (matchedCoupon) {
          couponText = matchedCoupon.text;
        }
      return couponText
    },
    // 立即兑换
    exchange() {
      if (this.ware.waresCount <= 0) {
        alert("该商品库存不足");
      } else if (this.ware.saleIntegral > this.pointInfo.points) {
        alert("您的积分不足");
      } else {
        this.$axios
          .$post("/insertIntegralOrder", {
            waresId: this.ware.id,
            waresName: this.ware.waresName, // 商品名称
            openId: this.openId,
            mobilePhone: this.phone,
            customerName: this.userInfo.nickname,
            exchangeNum: this.exchangeNum, // 兑换数量
            integral: this.ware.saleIntegral, // 一个商品的积分
            stationId: this.$route.params.sid
          })
          .then(res => {
            console.log(res);
            if (res.retCode === 0) {
              this.$router.push({
                path: "/" + this.enterpriseId + "/point/success"
              });
            } else {
              alert(res.message);
            }
          });
        // this.$router.push({
        //   path:
        //     "/" +
        //     this.enterpriseId +
        //     "/point/pay/" +
        //     this.$route.params.sid +
        //     "/" +
        //     this.$route.params.pid
        // });
      }
    },

    // 兑换数量
    handleValueChange(num) {
      let numStr = String(num);
      if (numStr.length > 6) {
        this.$toast("长度不能大于6位");
        this.isDisableExchange = true;
      } else {
        this.isDisableExchange = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.point-detail {
  display: flex;
  width: 100vw;
  flex-direction: column;
  box-sizing: border-box;
  background: #f8f8f8;
  padding-bottom: 2rem;
}
.point-detail .good {
  box-sizing: border-box;
  width: 100vw;
  height: 85vw;
  padding: 15vw;
  background: #ffffff;
}
.point-detail .good img {
  width: 100%;
  height: 100%;
}
.point-detail .title {
  width: 100%;
  /* height: 26.66vw; */
  padding: 4vw;
  // background: #ffffff;
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.point-detail .title .text {
  // width: 3.6rem;
  /* height: 0.5rem; */
  width: 90%;
  font-size: 0.36rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 800;
  color: #111111;
  line-height: 0.5rem;
  word-break: break-all;
}
.point-detail .title .title_left {
  .info_waresDetail {
    width: 100%;
    margin: 0.1rem 0rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    span{ 
      font-size: 14px;
      color: #333;
      font-weight: bold;
    }
  }
  .tittle_bottom{ 
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.point-detail .title .price {
  height: 0.7rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #fe9700;
  line-height: 0.7rem;
}
.point-detail .title .price .icon {
  display: inline-block;
  width: 0.3rem;
  height: 0.3rem;
  background: url("../../../../../static/common/a01_jifen@2x.png") no-repeat;
  background-size: cover;
  margin-right: 0.1rem;
}
.point-detail .title .price .amount {
  display: inline-block;
  font-size: 0.5rem;
}
.point-detail .title .points_modle{ 
  display: flex;
}

.point-detail .title .sold {
  height: 0.4rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 0.4rem;

  text-align: end;
}

// 合计积分
.point-detail .sum {
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 4vw;
  font-size: 0.37rem;
  background-color: white;
  span {
    margin-right: 10px;
  }
}
// 加减按钮
::v-deep .van-stepper__minus {
  background: #fe9700;
  color: #ffffff;
  width: 0.7rem;
  height: 0.7rem;
}
::v-deep .van-stepper__plus {
  background: #fe9700;
  color: #ffffff;
  width: 0.7rem;
  height: 0.7rem;
}

.point-detail .selected {
  width: 100%;
  height: 1.1rem;
  background: #ffffff;
  margin-top: 0.2rem;
  position: relative;
}
.point-detail .selected .text {
  width: 0.56rem;
  height: 1.1rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #aaaaaa;
  line-height: 1.1rem;
  position: absolute;
  left: 0.31rem;
  top: 0rem;
}
.point-detail .selected .content {
  width: 3.09rem;
  height: 1.1rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 500;
  color: #111111;
  line-height: 1.1rem;
  position: absolute;
  left: 1.17rem;
}
.point-detail .selected .icon {
  width: 0.42rem;
  height: 0.1rem;
  background: url("../../../../../static/point/6_d02_more.png") no-repeat 0px
    0px;
  background-size: cover;
  position: absolute;
  left: 6.3rem;
  top: 0.49rem;
}
.point-detail .pictures {
  width: 100%;
  height: 3.2rem;
  background: #ffffff;
  margin-top: 0.21rem;
  position: relative;
}

.point-detail .pictures .text {
  width: 1.74rem;
  height: 1.1rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #aaaaaa;
  line-height: 1.1rem;
  position: absolute;
  top: 0rem;
  left: 2.88rem;
}
.point-detail .buy {
  position: fixed;
  bottom:0;
  left: 0;
  right: 0;
  height: 1.03rem;
  background-color: white;
  padding-bottom:  0.83rem;
}

.point-detail .buy button {
  border: none;
  background-color: transparent;
  outline: none;
  display: block;
  width: 6.9rem;
  height: 0.8rem;
  // background: #fe9700;
  border-radius: 0.45rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 0.4rem;
  margin: 0 auto;
}
.point-detail > .center {
  width: 7rem;
  margin: 0 auto;
  > .title {
    text-align: center;
    height: 0.6rem;
    line-height: 0.6rem;
    margin: 0;
    padding: 0;
    font-size: 0.27rem;
    display: flex;
    justify-content: center;
    text-align: center;
  }
  .coupon {
    display: flex;
    justify-content: space-between;
    height: 2.5rem;
    margin-bottom: 0.3rem;
    box-shadow: 0rem 0rem 0.1rem 0.04rem rgba(233, 223, 223, 0.5);
    > .left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      width: 2.2rem;
      height: 2.5rem;
      text-align: center;

      .amount {
        display: block;
        font-size: 0.4rem;
        font-weight: 500;
        color: #ffffff;
        line-height: 0.56rem;
        text-align: center;
        margin-top: 0rem;
        .value {
          font-size: 0.6rem;
        }
      }
      .condition {
        font-size: 0.24rem;
        font-weight: 400;
        color: #ffffff;
        line-height: 0.33rem;
        text-align: center;
        margin-top: 0.25rem;
      }
      .exchangeName {
        display: none;
        font-size: 0.35rem;
        font-weight: 500;
        color: #ffffff;
        line-height: 0.56rem;
      }
    }
    > .right {
      width: 4.56rem;
      height: 2.45rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin: 0.08rem 0 0.05rem 0;
      .title {
        height: 0.3rem;
        font-size: 0.24rem;
        font-weight: 600;
        line-height: 0.33rem;
        .type {
          width: 1.13rem;
          height: 0.3rem;
          line-height: 0.3rem;
          display: inline-block;
          background: #f8c;
          border-radius: 0.19rem;
          font-size: 0.24rem;
          font-weight: 600;
          color: #ffffff;
          text-align: center;
        }
        .state {
          margin-left: 0.2rem;
          color: #7f7f7f;

          height: 0.33rem;
          font-size: 0.24rem;
          font-weight: 600;
          line-height: 0.33rem;
        }
      }
      .content {
        display: flex;
        justify-content: space-between;
        margin: 0.05rem 0 0.05rem 0;
        height: 1.4rem;

        .items {
          width: 4.3rem;
          height: 100%;
          display: flex;
          justify-content: space-around;
          flex-direction: column;
          .item {
            color: #272626;
            font-size: 0.21rem;
            > span {
              width: 3.3rem;
              display: inline-block;
              color: #272626;
              font-size: 0.22rem;
              font-weight: bold;
              overflow: scroll; /* 超出部分隐藏 */
              white-space: nowrap; /* 文本不换行 */
            }
          }
          .from {
            display: block;
          }
        }
        > .btn {
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-right: 0.1rem;
          > button {
            height: 0.6rem;
            background: linear-gradient(143deg, #fad965 0%, #f3b235 100%);
            border-radius: 0.2rem;
            border: none;
            outline: none;
            color: #ffffff;
            line-height: 0.33rem;
            font-size: 0.3rem;
            font-weight: 400;
            overflow: hidden; /* 超出部分隐藏 */
            white-space: nowrap; /* 文本不换行 */
            display: none;
          }
        }
      }
      .notip {
        height: 1.8rem;
      }
      .tip {
        margin-right: 0.2rem;
        border-top: 0.02rem dashed #d8d8d8;
        height: 0.49rem;
        font-size: 0.22rem;
        font-weight: 400;
        color: #7f7f7f;
        line-height: 0.23rem;
        padding-top: 0.12rem;
        box-sizing: border-box;
        overflow: scroll; /* 超出部分隐藏 */
        white-space: nowrap;
        /*  text-overflow: ellipsis;*/
      }
    }
  }
  .direct {
    > .left {
      background: url("~static/coupon/quan1.2x.png") no-repeat;
      background-size: 100% 100%;
    }
    > .right {
      > .title > .type {
        background: #f8ce57;
      }
      > .content > .btn button {
        background: linear-gradient(143deg, #fad965 0%, #f3b235 100%);
      }
    }
  }
  .rate {
    > .left {
      background: url("~static/coupon/quan2.2x.png") no-repeat;
      background-size: 100% 100%;
    }
    > .right {
      > .title > .type {
        background: #eb8573;
      }
      > .content > .btn button {
        background: linear-gradient(143deg, #f4a796 0%, #e67462 100%);
      }
    }
  }
  .exchange {
    > .left {
      background: url("~static/coupon/quan3.2x.png") no-repeat;
      background-size: 100% 100%;
      > .amount,
      > .condition {
        display: none;
      }
      > .exchangeName {
        display: inline-block;
        width: 1.5rem;
        margin: 0 auto;
      }
    }
    > .right {
      > .title > .type {
        background: #19c79b;
      }
      > .content {
        > .items {
          width: 3.3rem;
          .item span {
            width: 2.3rem;
          }
        }
        > .btn button {
          background: linear-gradient(143deg, #21d9b4 0%, #0fb582 100%);
          display: block;
        }
      }
    }
  }
  .expired {
    > .left {
      background: url("~static/coupon/quan4.2x.png") no-repeat;
      background-size: 100% 100%;
    }
    > .right {
      > .title > .type {
        background: #bfbfbf;
      }
      > .content > .btn button {
        display: none;
      }
    }
  }
  .carwash {
    > .left {
      background: url("~static/coupon/quan5.2x.png") no-repeat;
      background-size: 100% 100%;
    }

    > .right {
      > .title > .type {
        background: #19c79b;
      }

      > .content > .btn button {
        background: linear-gradient(143deg, #21d9b4 0%, #0fb582 100%);
        display: block;
      }
    }
  }
  .reduction {
      > .left {
        background: url("~static//coupon/lijian.png") no-repeat;
        background-size: 100% 100%;
      }
      > .right {
        > .title > .type {
          background: #eb6ba4;
        }
        > .content > .btn button {
          background: linear-gradient(143deg, #f57eb2 0%, #ec4e95 100%);
        }
      }
    }
}
</style>
